<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/animate.min.css" />
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
		<style>
			.swiper-container {
				width: 100%;
				height: 100%;
			}
			
			.swiper-slide {
				text-align: center;
				font-size: 18px;
				background: #fff;
				/* Center slide text vertically */
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
			}
			
			.swiper-wrapper {}
			
		</style>
	</head>

	<body class="ddqpage">

		<div class="mui-content" id="pullrefresh">

			<div class="sticky-wrap">
				<!--头部宣传图-->
				<div class="head-wrap">
					<img class="titleimg" src="../imgs/ddq_tbg.png" />

					<div class="swiper-container">
						<div class="swiper-wrapper" id="swiper-wrapper">

						</div>
					</div>

				</div>

			</div>

			<!--商品列表-->
			<div id="listview" style="padding-bottom: 100px;">

			</div>

		</div>

		<!--选项卡模板-->
		<script type="text/html" id='tabTpl'>
			{{each hourMap val key}}
			<div class="swiper-slide">{{val}}</div>
			{{/each}}
		</script>

		<!--商品列表模板-->
		<script type="text/html" id='goodsTpl'>
			{{each goodslist item idx}}
			<div class="card-wrap" onclick="goodsTap('{{idx}}')">
				<div class="pic-wrap">
					<img class="lazy" data-src="{{item.itempic}}" />
				</div>
				<div class="title-wrap">
					<img class="shoptype" src="{{item.shoptype==='B'?'../imgs/shoptype_b.png':'../imgs/shoptype_c.png'}}"></img>
					<span class="title ">{{item.itemtitle}}</span>
				</div>
				<div class="price-wrap">
					<div class="itemendprice">￥{{item.itemendprice}}</div>
					<div class="itemquan">{{item.couponmoney}}元券</div>
					<div class="itemsale">销量{{item.itemsale}}</div>
					<!--<div class="btn">
						<img class="icon" src="../imgs/share.png" />
						分享</div>-->
					<div class="btn">
						<img class="icon" src="../imgs/shandian.png" /> {{if item.grab_type==3}}
						<span>快抢</span> {{else if item.grab_type==2}}
						<span>已抢光</span> {{else if item.grab_type==1}}
						<span>即将开始</span> {{/if}}
					</div>
				</div>
			</div>
			{{/each}}
		</script>

		<script type="text/template" id="ddqTpl">
			{{each ddq item idx}}
			<div class="card-wrap" onclick="goodsTap('{{item.id}}')">
				<img class="lazy pic" data-src="{{item.article_banner}}" />
				<div class="title">{{item.name}}</div>
				<div class="info-wrap">
					<img class="avatar" src="{{item.head_img}}" />
					<span class="nickname">{{item.talent_name}}</span>
					<img class="eye" src="../imgs/eye.png" />
					<span>{{item.readtimes}}</span>
				</div>
			</div>
			{{/each}}

		</script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/template-web.js"></script>
		<script type="text/javascript" src="../js/api.js"></script>
		<script type="text/javascript" src="../js/zepto113.js"></script>
		<script type="text/javascript" src="../js/lazyload.js"></script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: "#pullrefresh", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down: {
						style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
						color: '#FE413F', //可选，默认“#2BD009” 下拉刷新控件颜色
						height: '50px', //可选,默认50px.下拉刷新控件的高度,
						range: '100px', //可选 默认100px,控件可下拉拖拽的范围
						offset: '145px', //可选 默认0px,下拉刷新控件的起始位置
						auto: false, //可选,默认false.首次加载自动上拉刷新一次
						callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
							getGoods();
						}
					}
				},
			})

			var hourMap = {
				1: "00:00",
				2: "10:00",
				3: "15:00",
				4: "19:00",
				5: "20:00",
				6: "00:00",
				7: "10:00",
				8: "15:00",
				9: "19:00",
				10: "20:00",
				11: "00:00",
				12: "10:00",
				13: "15:00",
				14: "19:00",
				15: "20:00"
			}

			mui.plusReady(function() {
				plus.webview.currentWebview().setStyle({
					scrollIndicator: 'none'
				});

				var html = template('tabTpl', {
					hourMap: hourMap,
				})
				$(".swiper-wrapper").html(html)
				mySwiper = new Swiper('.swiper-container', {
					direction: "horizontal",
					slidesPerView: 5,
					on: {
						init: function() {
							console.log("====init====")
						},
						click: function() {
							tabTap(this.clickedIndex)
						}
					}
				})
			})

			//页面展示的时候开始初始化数据和渲染界面
			window.addEventListener("show", function() {
				var h = new Date().getHours();
				var hour_type = -1;
				if (h < 10) {
					hour_type = 6
				} else if (h < 15) {
					hour_type = 7
				} else if (h < 19) {
					hour_type = 8
				} else if (h < 20) {
					hour_type = 9
				} else if (h < 24) {
					hour_type = 10
				}

				if (hour_type != -1) {
					hourType = hour_type
					setTimeout(function() { //延迟执行（等待页面加载）
						renderTabbar(hour_type - 1)
					}, 100)
				}
			})

			var swiperWidth = 0;
			var maxTranslate = 0;
			var maxWidth = 0
			var mySwiper = null;

			//初始化选项卡和swiper
			function renderTabbar(initialSlide) {
				swiperWidth = mySwiper.el.clientWidth
				maxTranslate = mySwiper.maxTranslate();
				maxWidth = -maxTranslate + swiperWidth / 2
				tabTap(initialSlide)
			} //切换时间段
			function tabTap(clickedIndex) {

				var slide = mySwiper.slides[clickedIndex]

				var slideLeft = slide.offsetLeft
				var slideWidth = slide.clientWidth
				var slideCenter = slideLeft + slideWidth / 2

				mySwiper.setTransition(500)
				if (slideCenter < swiperWidth / 2) {
					mySwiper.setTranslate(0)
				} else if (slideCenter > maxWidth) {
					mySwiper.setTranslate(maxTranslate)
				} else {
					nowTlanslate = slideCenter - swiperWidth / 2
					mySwiper.setTranslate(-nowTlanslate)
				}

				$(".swiper-slide.active").removeClass('active')
				$(".swiper-slide").eq(clickedIndex).addClass('active')

				hourType = clickedIndex + 1
				getGoods();
			}

			//商品列表
			var hourType = 1;
			var goodslist = []

			function getGoods() {
				window.scrollTo({
					top: 0,
					behavior: "smooth"
				})

				api.getFastbuy(hourType, function(res) {
					if (res.code == 1) {

						goodslist = res['data']

						var html = template('goodsTpl', {
							goodslist: goodslist
						})

						$('#listview').html(html)

						myLazyLoad.update()
					}

				})

				if (mui('#pullrefresh').pullRefresh()) {
					mui('#pullrefresh').pullRefresh().endPulldown();
				}
			}

			//商品点击
			function goodsTap(idx) {
				if (goodslist[idx] && window.plus) {
					if (goodslist[idx].grab_type == 1) {
						plus.nativeUI.toast("咚咚抢即将开始")
						return
					}
					if (goodslist[idx].grab_type == 2) {
						plus.nativeUI.toast("此商品已抢光")
						return
					}

					mui.openWindow({
						url: 'detail.html',
						id: 'detail',
						styles: {
							popGesture: "close"
						},
						extras: {
							goods: goodslist[idx]
						}
					})
				} else {
					plus.nativeUI.alert('出错了')
				}

			}

			//页面滚动到顶部
			function scrolltotop() {
				window.scrollTo({
					top: 0,
					behavior: "smooth"
				})
			}

			//图片懒加载器
			var myLazyLoad = new LazyLoad({
				elements_selector: ".lazy"
			});
		</script>
	</body>

</html>
